<template>
  <div class="passing-logs h-100P w-100P flex-column">
    <query-container class="query-container" @search="handleSearch" @reset="handleReset">
      <!-- 查询条件 -->
      <div class="justify-between">
        <el-form
          ref="queryForm"
          inline
          :model="page"
          label-position="left"
          :label-width="handleScreenWidthToVw(90)+'px'"
        >
          <el-form-item label="人员类型" prop="org">
            <el-select
              ref="orgSelect"
              v-model="page.identityEnum"
              placeholder="请选择"
              class="select-width"
            >
              <el-option
                v-for="(type,i) in typeOptions"
                :key="i"
                :label="type.name"
                :value="type.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通行检测点" prop="deviceId">
            <el-select v-model="page.deviceId" placeholder="请选择" style="width: 250px;">
              <el-option
                v-for="(device,i) in deviceData"
                :key="i"
                :label="device.remarkName"
                :value="device.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通行状态" prop="iotBizEnum">
            <el-select v-model="page.iotBizEnum" placeholder="请选择" class="select-width">
              <el-option
                v-for="(INTERNAL_MEMBER,i) in innerState"
                :key="i"
                :label="INTERNAL_MEMBER.label"
                :value="INTERNAL_MEMBER.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="黑名单" prop="black">
            <el-select v-model="page.black" placeholder="请选择" class="select-width">
              <el-option
                v-for="(black,i) in blacks"
                :key="i"
                :label="black.label"
                :value="black.value"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="人员姓名" prop="keyword">
            <el-input
              v-model="page.keyword"
              placeholder="请输入人员姓名"
              clearable
              class="select-width"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </query-container>
    <div class="flex-sub">
      <el-table
        :data="tableData"
        header-cell-class-name="table-header-cell"
        height="98%"
        header-row-class-name="table-header-row"
      >
        <el-table-column label="通行时间" key="1">
          <template slot-scope="scope">
            {{scope.row.deviceVO.activeTime|dateTimeFormatter}}
          </template>
        </el-table-column>
        <el-table-column prop="recordsPersonVO.name" label="人员姓名" key="2"></el-table-column>
        <el-table-column
          prop="recordsPersonVO.identifyEnumName"
          label="人员类型"
          key="3"
        ></el-table-column>
        <!-- <el-table-column label="黑名单" key="7">
          <template slot-scope="scope">
            <span :class="{ 'black': scope.row.recordsPersonVO.black }">
              {{isBlack(scope.row.recordsPersonVO.black)}}
            </span>
          </template>
        </el-table-column> -->
        <el-table-column prop="deviceVO.remarkName" label="通行检测点" key="5"></el-table-column>
        <el-table-column label="通行状态" key="6">
          <template slot-scope="scope">
            <span class="black" :class="{ 'enter': isEnter( scope.row.deviceVO.iotBizEnum)}">
              {{scope.row.deviceVO.iotBizEnumName}}
            </span>
            <el-tooltip
              v-if="isShowWarning(scope.row)"
              effect="light"
              popper-class="tooltip"
              :content="warningText"
              placement="right-end"
            >
              <svg-icon class="warning-icon" icon-class="warning"></svg-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="140px" align="center" key="8">
          <template slot-scope="scope">
            <span class="detail-button" @click="handleDialog(scope.row)">查看详情</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      hide-on-single-page
      background
      layout="total,prev, pager, next, jumper"
      :current-page="page.pageNo"
      :page-size="page.pageSize"
      :total="page.total"
      class=" pagination"
      @current-change="handlePageChange"
    />

    <el-dialog
      :visible.sync="visible"
      :width="handleScreenWidthToVw(574)+'px'"
      :title="dialogTitle"
    >
      <div class="car-content flex">
        <div class="flex-column-center mg-lr-20">
          <img :src="formData.recordsPersonVO.fileId|imageFormat" class="license-plate-number" />
          <div class="license-plate-label">人员头像</div>
        </div>

        <el-form class="flex-sub">
          <el-form-item label="姓名:">{{formData.recordsPersonVO.name}}</el-form-item>
          <el-form-item label="所属组织:">{{formData.recordsPersonVO.orgName}}</el-form-item>

          <el-form-item label="通行时间:">
            {{formData.recordsPersonVO.createTime|dateTimeFormatter}}
          </el-form-item>
          <el-form-item label="通行检测点:">{{formData.deviceVO.remarkName}}</el-form-item>
          <el-form-item label="通行状态:">
            {{ formData.deviceVO.iotBizEnumName}}
          </el-form-item>
        </el-form>
      </div>
      <div class="flex-column-center flex-sub">
        <img :src="formData.fileId|imageFormat" class="license-plate-number" />
        <div class="license-plate-label">通行记录</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QueryContainer from '@/components/query-container'
import { handleScreenWidthToVw } from '@/utils/tools'
import { MAX_INTEGER } from '@/consts'
// import { tree } from '@/utils/tree'
import { findAccessControlLogPageByParams, findDevicePageByParam } from './api.js'
export default {
  name: 'PassingLogs',
  components: {
    QueryContainer,
  },
  data() {
    return {
      visible: false,
      warningText: '该人员未按预约时间进入',
      page: {
        carOnly: false,
        identityEnum: undefined,
        iotBizEnum: null,
        keyword: '',
        pageNo: 1,
        pageSize: 13,
        name: '',
        total: null,
        dateRange: [],
        page: '',
        black: undefined,
        startTime: '',
        endTime: '',
        deviceId: '',
      },
      formData: {
        recordsPersonVO: {
          name: '',
          orgName: '',
          createTime: null,
          fileId: '',
        },
        fileId: '',
        deviceVO: { remarkName: '', iotBizEnumName: '' },
      },
      tableData: [],
      deviceData: [],
    }
  },
  computed: {
    deviceQuery() {
      return {
        alg: false,
        location: true,
        enableStateEnum: 'ENABLE',
        excludeBusinessTypeEnum: 'DEVICE',
        // gatewayId: '',
        // keyword: '',
        // netTypeEnum: undefined,
        // online: undefined,
        // productId: '',
        // regionId: '',
        pageSize: MAX_INTEGER,
        pageNo: 1,
        total: 20,
      }
    },
    typeOptions() {
      return [
        { name: '园内员工', value: 'INTERNAL_MEMBER' },
        { name: '园外访客', value: 'VISITOR' },
      ]
    },
    defaultProps() {
      return {
        children: 'children',
        label: 'name',
      }
    },
    innerState() {
      return [
        { value: 'PEOPLE_ENTER', label: '进入' },
        { value: 'PEOPLE_LEAVE', label: '出去' },
      ]
    },
    // blacks() {
    //   return [
    //     { value: false, label: '否' },
    //     { value: true, label: '是' },
    //   ]
    // },
    dialogTitle() {
      const res =
        this.formData.recordsPersonVO.identityEnum === 'INTERNAL_MEMBER' ? '园内员工' : '园外访客'
      return '记录详情-' + res
    },
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
  },
  created() {
    this.getData()
    this.getDevicList()
  },
  methods: {
    //
    isShowWarning(log) {
      if (!log.appointmentVO) {
        return false
      } else if (
        log.deviceVO.activeTime < log.appointmentVO.startTime ||
        log.deviceVO.activeTime > log.appointmentVO.endTime
      ) {
        return true
      } else return false
    },
    // 点击组织树的节点
    handleNodeClick(obj) {
      this.page.selectOrg = obj.name
      this.page.orgId = obj.id
    },
    //查看详情
    handleDialog(log) {
      this.formData = log
      this.visible = true
    },
    async getDevicList() {
      const { records } = await findDevicePageByParam(this.deviceQuery)
      this.deviceData = records
    },
    async getData() {
      const { total, records } = await findAccessControlLogPageByParams(this.page)
      this.tableData = records
      this.page.total = total
    },
    isBlack(black) {
      return black ? '是' : '否'
    },
    isEnter(enter) {
      return enter === 'PEOPLE_ENTER'
    },
    handlePageChange(pageNo) {
      this.page.pageNo = pageNo
      this.getData()
    },
    handleSearch() {
      this.page.startTime = this.page.dateRange[0]
      this.page.endTime = this.page.dateRange[1]
      this.getData()
    },

    handleReset() {
      this.$refs.queryForm.resetFields()
      this.page.identityEnum = undefined
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
.passing-logs {
  padding: vh(20px) vw(20px);
}

.query-container {
  padding: 0 0 vh(20px) 0;
}

.car-content {
  width: vw(390px);
  border-right: 1px solid #ccc;
}

.license-plate-number {
  width: vw(118px);
  height: vw(118px);
  border-radius: 50%;
}

.license-plate-label {
  line-height: vh(60px);
  text-align: center;
}

.black {
  color: #d12d1f;
}

.enter {
  color: #67c23a;
}

.warning-icon {
  font-size: vh(13px);
}

.detail-button {
  font-size: vw(14px);
  color: #0084ee;
  cursor: pointer;

  & :hover {
    opacity: 0.7;
  }
}

.selete-org-bg {
  height: vh(200px);
  padding: 0 !important;
  overflow: auto;
  background-color: #fff;
}

.select-width {
  width: vw(300px);
}

::v-deep {
  .el-tabs__item.is-active {
    color: #d12d1f;
  }

  .el-tabs__active-bar {
    background-color: #d12d1f;
  }

  .el-date-editor .el-range__icon {
    float: right;
  }

  .el-form-item {
    margin-bottom: 0;
    font-size: vw(14px);
  }

  .el-dialog__header {
    padding: vh(20px) vw(20px) 0 vw(20px);
  }

  .el-dialog__body {
    display: flex;
    padding: vh(20px) 0;
  }

  .el-form-item__label {
    font-size: vw(14px);
  }

  .el-form-item__content {
    font-size: vw(14px);
  }
}
</style>

<style lang="scss" >
.el-tooltip__popper[x-placement^='right-end'] .popper__arrow {
  display: none;
}

.tooltip {
  padding: vh(5px) vw(8px);
  color: #d12d1f;
  border: 1px solid #ccc !important;
  border-radius: 0;
}
</style>
